<template>
  <div class="driver-comments-bg">
    <el-card class="driver-comments-card">
      <div class="driver-comments-header">
        <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
        <div class="driver-comments-title">司机评论列表</div>
      </div>
      
      <div class="driver-info" v-if="driverId">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="司机ID">{{ driverId }}</el-descriptions-item>
          <el-descriptions-item label="总评论数">{{ statistics.total_comments }}</el-descriptions-item>
          <el-descriptions-item label="平均评分">
            <el-rate :model-value="statistics.average_rating" disabled show-score />
          </el-descriptions-item>
          <el-descriptions-item label="评论状态">
            <el-tag type="success">仅显示AI审核通过的评论</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div v-if="loading" class="loading-container">
        <el-icon class="is-loading" size="32"><Loading /></el-icon>
        <div>正在加载评论列表...</div>
      </div>
      
      <div v-else-if="comments.length > 0" class="comments-list">
        <div 
          v-for="comment in comments" 
          :key="comment.id" 
          class="comment-item"
        >
          <div class="comment-header">
            <div class="comment-info">
              <span class="passenger-name">{{ comment.passenger_name }}</span>
              <span class="comment-time">{{ formatTime(comment.rating_time) }}</span>
            </div>
            <div class="comment-rating">
              <el-rate :model-value="comment.rating" disabled show-score />
            </div>
          </div>
          
          <div class="comment-content">
            <div class="comment-text">{{ comment.comment }}</div>
            
            <div v-if="comment.image_url" class="comment-image">
              <el-image 
                :src="comment.image_url" 
                :preview-src-list="[comment.image_url]"
                fit="cover"
                class="comment-img"
              />
            </div>
          </div>
          
          <div class="comment-footer">
            <el-tag size="small" type="success">AI审核通过</el-tag>
            <span class="order-number">订单: {{ comment.order_number }}</span>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container" v-if="pagination.total > pagination.page_size">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.page_size"
            :total="pagination.total"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      
      <div v-else class="no-comments">
        <el-empty description="暂无评论信息" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'
import { commentAPI } from '@/api/order'

const route = useRoute()
const router = useRouter()
const driverId = route.params.driverId || route.query.driver_id
const comments = ref([])
const loading = ref(true)
const statistics = ref({
  total_comments: 0,
  average_rating: 0
})
const pagination = ref({
  page: 1,
  page_size: 20,
  total: 0
})

function goBack() {
  router.go(-1)
}

function formatTime(time) {
  if (!time) return '--'
  return new Date(time).toLocaleString('zh-CN')
}

async function fetchComments() {
  if (!driverId) {
    ElMessage.error('缺少司机ID参数')
    return
  }
  
  try {
    loading.value = true
    
    const response = await commentAPI.getDriverComments(driverId)
    
    if (response.code === 200) {
      comments.value = response.data.comments || []
      statistics.value = response.data.statistics || {
        total_comments: 0,
        average_rating: 0
      }
      
      // 更新分页信息
      if (response.data.pagination) {
        pagination.value = {
          page: response.data.pagination.page || 1,
          page_size: response.data.pagination.page_size || 20,
          total: response.data.pagination.total || 0
        }
      }
    } else {
      ElMessage.error(response.message || '获取评论列表失败')
    }
  } catch (error) {
    console.error('获取评论列表失败:', error)
    ElMessage.error('获取评论列表失败')
  } finally {
    loading.value = false
  }
}

function handleSizeChange(size) {
  pagination.value.page_size = size
  pagination.value.page = 1
  fetchComments()
}

function handleCurrentChange(page) {
  pagination.value.page = page
  fetchComments()
}

onMounted(() => {
  fetchComments()
})
</script>

<style scoped>
.driver-comments-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #fff 60%, #e6f7ff 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
}

.driver-comments-card {
  width: 100%;
  max-width: 800px;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(34,34,34,0.08);
  padding: 32px 36px 24px 36px;
  position: relative;
}

.driver-comments-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.driver-comments-title {
  font-size: 26px;
  font-weight: bold;
  color: #222;
  text-align: center;
  margin: 0 auto;
  letter-spacing: 2px;
}

.driver-info {
  margin-bottom: 24px;
}

.loading-container {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.comments-list {
  margin-top: 20px;
}

.comment-item {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.comment-info {
  display: flex;
  flex-direction: column;
}

.passenger-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.comment-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.comment-rating {
  display: flex;
  align-items: center;
}

.comment-content {
  margin-bottom: 12px;
}

.comment-text {
  line-height: 1.6;
  color: #666;
  margin-bottom: 12px;
  word-break: break-word;
}

.comment-image {
  margin-top: 12px;
}

.comment-img {
  width: 200px;
  height: 150px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.order-number {
  font-size: 12px;
  color: #999;
}

.pagination-container {
  margin-top: 24px;
  text-align: center;
}

.no-comments {
  text-align: center;
  padding: 40px 20px;
}
</style> 